#set($layout = "blank.html")
<link rel="stylesheet" href="$!{base}/resources/assets/css/chosen.css" />
<div class="space-4"></div>
<div class="row">
	<div class="col-xs-1"></div>
	<div class="col-xs-10">
		<form id="addSubsidiaryForm">
			<input type="hidden" id="_cityId_" value="$!obj.data.subsidiary.city_id">
			<input type="hidden" id="_areaId_" value="$!obj.data.subsidiary.area_id">
			<div>
				<label> 地区 <small class="text-info">分支机构地区</small></label>
				<div class="row">
					<div class="col-xs-4">
						<select name="provinceId" id="provinceId" class="form-control">
							<option value="0">请选择省份</option>
							<optgroup label="-------------------">
								<!-- 遍历省份 -->
								#foreach($province in $obj.data.provinces)
								<!-- 遍历结束 -->
								<option value="$!province.code" #if($!province.name == $!obj.data.subsidiary.province_name )selected #end>$!province.name </option>
								#end
							</optgroup>
						</select>
					</div>
					<div class="col-xs-4">
						<select name="cityId" id="cityId" class="form-control">
							<option value="0">请选择城市</option>
							<optgroup label="-------------------" id="citySelector">
							</optgroup>
						</select>
					</div>
					<div class="col-xs-4">
						<select name="areaId" id="areaId" class="form-control">
							<option value="0">请选择地区</option>
							<optgroup label="-------------------" id="areaSelector">
							</optgroup>
						</select>
					</div>
				</div>
			</div>

			<div>
				<label> 机构地址 <small class="text-info">分支机构地址</small></label>
				<div>
					<input class="form-control" value="$!obj.data.subsidiary.sub_address" type="text" placeholder="请输入机构地址" name="address" data-type='required' data-error='请输入机构地址'>
				</div>
			</div>

			<div>
				<label> 机构名称 <small class="text-info">分支机构名称</small></label>
				<div>
					<input class="form-control" type="text" placeholder="请输入机构名称" name="name" value="$!obj.data.subsidiary.sub_name" data-type='required' data-error='请输入机构名称'>
				</div>
			</div>
			
			<div>
				<label> 机构编码 <small class="text-info">分支机构编码</small></label>
				<div>
					<input class="form-control" type="text" placeholder="请输入机构编码" name="code" value="$!obj.data.subsidiary.sub_code" data-type='required' data-error='请输入机构编码'>
				</div>
			</div>

			<div>
				<label> 机构电话 <small class="text-info">分支机构联系方式</small></label>
				<div>
					<input class="form-control" type="text" placeholder="请输入机构联系方式" name="phone" value="$!obj.data.subsidiary.sub_phone" data-type='phone' data-error='请输入机构联系方式'>
				</div>
			</div>

			<div>
				<label> 机构负责人 <small class="text-info">分支机构负责人</small></label>
				<div>
					<select class="chosen-select form-control" name="principalId" id="principalId" data-placeholder="请选择项目负责人">
						<option value="0">请选择选分公司负责人</option> #foreach($user in $obj.data.users)
						<!-- 全部用户 -->
						<option value="$!{user.id}" #if($user.id == $!obj.data.subsidiary.sub_principal_id )selected #end>$user.realName $!user.name</option>
						<!-- 遍历结束 --> #end
					</select>
					<!-- input class="form-control" type="text" placeholder="请输入机构负责人" name="principalId" data-type='required' data-error='请输入机构负责人' -->
				</div>
			</div>

			<div>
				<label> 机构介绍 <small class="text-info">分支机构介绍信息</small></label>
				<div>
					<textarea class="form-control limited autosize-transition" name="description" maxlength="500" placeholder="请输入机构描述信息">$!obj.data.subsidiary.sub_des</textarea>
				</div>
			</div>

			<div class="space-4"></div>
			<div class="space-4"></div>
			<input type="hidden" name="id" id="subsidiaryId" value="$!obj.data.subsidiary.id">
			<div class="pull-right" style="margin-right:45px">
				<button type="button" class="btn btn-sm btn-primary" onclick="save()">
					<i class="fa fa-save"></i> 提交
				</button>
				<button class="btn btn-sm btn-warning btn-dialog-undo">
					<i class="fa fa-undo"></i> 返回
				</button>
			</div>
		</form>
	</div>
	<div class="col-xs-1"></div>
</div>
<script src="$!{base}/resources/assets/js/jquery.inputlimiter.1.3.1.js"></script>
<script src="$!{base}/resources/assets/js/jquery.autosize.js"></script>
<script src="$!{base}/resources/assets/js/chosen.jquery.js"></script>
<script>
	$(function() {
		//省份切换
		$("#provinceId").on('change', function() {
			$.post(getRootPath() + "/subsidiary/city/" + $(this).val(), {}, function(result) {
				console.log(result);
				if (result.operationState == 'SUCCESS') {
					var citySelector = $("#citySelector").empty();
					$(result.data.citys).each(function(i, item) {
						citySelector.append('<option value="'+item.code+'">' + item.name + '</option>');
					})
				}
			}, 'json');
		});
		//城市切换
		$("#cityId").on('change', function() {
			$.post(getRootPath() + "/subsidiary/area/" + $(this).val(), {}, function(result) {
				console.log(result);
				if (result.operationState == 'SUCCESS') {
					var areaSelector = $("#areaSelector").empty();
					$(result.data.areas).each(function(i, item) {
						areaSelector.append('<option value="'+item.code+'">' + item.name + '</option>');
					})
				}
			}, 'json');
		});
		//数据自动加载效果
		var cityId = $('#_cityId_').val();
		var areaId = $('#_areaId_').val();
		if ($("#provinceId").val()) {//如果有选中的省份 自动加载城市
			$.post(getRootPath() + "/subsidiary/city/" + $("#provinceId").val(), {}, function(result) {
				console.log(result);
				if (result.operationState == 'SUCCESS') {
					var citySelector = $("#citySelector").empty();
					$(result.data.citys).each(function(i, item) {
						citySelector.append('<option value="'+item.code+'" '+ ( cityId == item.code ? 'selected' : '') + '>' + item.name + '</option>');
					});
					if (cityId) { //如果城市选中那么加载地区
						$.post(getRootPath() + "/subsidiary/area/" +cityId, {}, function(result) {
							if (result.operationState == 'SUCCESS') {
								var areaSelector = $("#areaSelector").empty();
								$(result.data.areas).each(function(i, item) {
									areaSelector.append('<option value="'+item.code+'"'+ ( areaId == item.code ? 'selected' : '') + '>' + item.name + '</option>');
								})
							}
						}, 'json');
					}
				}
			}, 'json');
		}
		
		
		
		//描述框效果
		$('textarea.limited').inputlimiter({
			remText : '还可以输入 %n 字',
			limitText : '最大允许: %n 字.'
		});
		$('textarea[class*=autosize]').autosize({
			append : "\n"
		});

		//chosen
		$('.chosen-select').chosen();
	})

	function save() {
		if ($('input').validation()) {
			if ($("#areaId").val() == 0) {
				validationFail("请选择分支机构地区", $("#areaId"));
				return;
			}
			if ($("#principalId").val() == 0) {
				validationFail("请选择机构负责人", $("#principalId").parent());
				return;
			}
			if ($('#subsidiaryId').val()) {
				$.post(getRootPath() + '/subsidiary/edit', $('#addSubsidiaryForm').serialize(), commonAjaxCallBasck, 'json');
			}else{
				$.post(getRootPath() + '/subsidiary/add', $('#addSubsidiaryForm').serialize(), commonAjaxCallBasck, 'json');
			}
			
		}
	}
</script>